<%@ page contentType="text/html; charset=UTF-8" language="java"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8" />
<title>用户管理系统</title>
<!-- 显示各个元素时需要首获取样式说明 -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<!-- 引入自定义样式文件 -->
<link rel="stylesheet" href="css/style.css" />

<style>
#left-section {
	height: 400px;
}

#right-panel {
	height: 400px;
}

#top-tools {
	height: 60px;
	border: 1px solid #00ff00;
}

#center-content {
	height: 340px;
}

.row-focus {
	background-color: #f5f5f5;
	border: 1px solid #ff0000;
}
</style>
</head>

<body>

	<!-- 顶部导航条 -->
	<nav class="navbar navbar-default " role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<h4>

					<i class="glyphicon glyphicon-user"></i> ${user.name}
				</h4>
			</div>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">退出</a></li>
			</ul>
		</div>
	</nav>
	<!-- 使用布局系统分成左右两大列 -->
	<div class="container">
		<div class="row">

			<section id="left-section" class="col-md-2 btn-group-vertical"
				style="padding: 0; border: 1px solid blue">
				<button id="user-admin" class="btn btn-default active">
					用户管理<i class="glyphicon glyphicon-wrench"></i>
				</button>
				<button id="product-admin" class="btn btn-default ">
					商品管理<i class="glyphicon glyphicon-wrench"></i>
				</button>
			</section>

			<div id="right-panel" class="col-md-10"
				style="border: 1px solid #0000ff">
				<section id="top-tools" class="row navbar">


					<form class="navbar-form navbar-left" role="search" method="post"
						action="index.jsp">
						<div class="form-group">
							<label for="query-field" class="form-static">选择查询字段</label> <select
								id="query-field" name="queryField" class="form-control "
								style="width: 100px">
								<option value="all" data-like>所有</option>
								<option value="name" data-like>名称开头</option>
								<option value="age" data-gt>年龄位于></option>
								<option value="phone" data-eq>电话符合</option>
								<option value="email" data-eq>邮件以结尾</option>
							</select>
						</div>
						<div class="form-group">
							<input id="query-param" type="text" class="form-control"
								name="queryParam" value="" placeholder="Search">
						</div>
						<button id="op-query" type="submit" class="btn btn-default">查找用户</button>
					</form>

					<button id="op-add" class="btn btn-default navbar-btn ">增加用户</button>
					<button id="op-del" class="btn btn-danger navbar-btn ">删除用户</button>
					<button id="op-update" class="btn btn-warn navbar-btn ">更新用户</button>

				</section>
				<section id="center-content" class="row">
					<table class="table table-bordered">
						<thead>
							<tr>
								<td>用户编号</td>
								<td>用户名称</td>
								<td>用户密码</td>
								<td>用户性别</td>
								<td>用户年龄</td>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${pager.beanList}" var="user">
								<tr>
									<td>${user.id}</td>
									<td>${user.name}</td>
									<td>${user.password}</td>
									<td>${user.sex}</td>
									<td>${user.age}</td>
								</tr>
							</c:forEach>
						</tbody>
						<tfoot>
							<tr>
								<td colspan="4">

									<h4>${pager.title}</h4>

									<nav class="nav text-center">${pager.navUrl}</nav>

								</td>
							</tr>
						</tfoot>
					</table>
				</section>

			</div>
		</div>
	</div>

	<!-- 当document对象生成之后，再使用js代码操作它 -->
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.cookie.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript">
		//获取cookie中保存的查询信息：字段类型与输入的查询条件
		//以便自动填充上次选择的查询内容
		//上一次选择的项
		var queryField = $.cookie("queryField");
		//alert(fieldName);
		if (queryField == undefined) {
			queryField = "all";
		}
		var queryParam = $.cookie("queryParam");
		//alert(queryParam);
		if (queryParam == undefined) {
			queryParam = "*";
		}

		//选中下拉列表中的所有选择项，对它们进行循环操作
		$('#query-field option').each(function(index, option) {
			//alert(this.value+"->"+index);
			if (queryField == this.value) {
				$('#query-field').get(0).selectedIndex = index;
				return false;//终止foreach循环
			}

		});

		//alert(queryParam);
		$('#query-param').val(queryParam);

		//设置下拉列表元素的改变事件
		$('#query-field').change(function() {
			//alert(this); 
			//获取被选中的项
			var $option = $('#query-field').find("option:selected");
			//获取其值，并将其保存到cookie中
			$.cookie('queryField', $option.val());

		});

		$('#query-param').change(function() {
			//alert($(this).val());
			//将改变的值保存到cookie中
			$.cookie('queryParam', $(this).val());

		});

		//拦截提交按钮提交事件
		$('form').submit(function() {

		});

		//设置整个文档对象（代表所有元素的树型结构对象）
		$(document).click(function(e) {
			//使用各主流浏览器兼容性语法
			e = e || window.event;

			//判断是点击了左键
			if (e.button == 1) {

				return;
			}

			//判断点击的是否为tr元素
			var elem = e.srcElement || e.target;

			if ("TD" == elem.tagName) {
				//判断td是否是tbody下的td
				var $tbody = $(elem).parents('tbody');

				if ($tbody.prop('tagName') != undefined) {
					//选择所有的tr元素将它们的.row-focus样式去掉
					$('tbody tr').removeClass('row-focus');
					$('tbody tr').attr('focus', null)
					//将当前点击的tr包装为jQuery对象，并添加焦点样式
					$(elem).parent().addClass('row-focus');
					$(elem).parent().attr('focus', "focus")
				}

			}

		});

		//添加事件
		$('#op-add').click(function(){
			//向服务器请求添加对话框模板数据（html）
			$.ajax({
			   url:'fragment.servlet?fragment=add_model.jsp',
			   dataType:'html',
			   success:function(data){
				  
				   
				   //将html片断数据转成jquery对象
				   //将body中以前加入的片断删除
				   $('#addModal').remove();
				   //再将新的片断加入到body下
				   $(data).appendTo('body');
				   //在显示对话框之前，对片断中的添加按钮添加事件
				   $('#btn-submit').click(function(){
					   //收集表单字段数据
					   var params=$('#add-form').serialize();
					   //向服务发送ajax请求
					   $.ajax({
						   url:'index.servlet?op=add',
						   data:params,
						   dataType:'html',
						   success:function(pager){
							   if(pager){
								  alert('添加成功');
								  //删除表格的tbody与tfoot元素
								  $('table tbody').remove();
								  $('table tfoot').remove();
								  //向表格添加新的tboody与tfoot元素
								  $('table').append($(pager));
							   }else{
								   alert('添加失败'); 
							   }
						   }
					   });
				   });
				   //显示对话框
				   $('#addModal').modal({
					   show:true
				   });
				   
				   
			   }
			});
		});
		
		//更新事件
		$('#op-update').click(function() {

			/*
			<tr>
				<td>用户编号</td>
				<td>用户名称</td>
				<td>用户密码</td>
				<td>用户性别</td>
				<td>用户年龄</td>
			</tr>
			*/
			var id = $('tr[focus="focus"] :nth-child(1)').html();
			var name=$('tr[focus="focus"] :nth-child(2)').html();
			var password=$('tr[focus="focus"] :nth-child(3)').html();
			var sex=$('tr[focus="focus"] :nth-child(4)').html();
			var age=$('tr[focus="focus"] :nth-child(5)').html();
			
			if (id == undefined) {
				alert("请求选择要更新记录");
			} else {
                $.ajax({
                	url:'fragment.servlet?fragment=update_model.jsp',
                	data:{
                		'id':id,
                		'name':name,
                		'password':password,
                		'sex':sex,
                		'age':age
                	},		
                	dataType:'html',
                	success:function(data){
                		//$('body').append($(data));
                		//alert(data);
                		//先删除对话框
                		$('body #updateModal').remove();
                		//再加入对话框
                		$(data).appendTo($('body'));
                		//添加点击事件
                		$('#btn-submit').click(function(){
                			//更新记录的操作
                			$.ajax({
                				url:'index.servlet?op=update',
                				data:$('#update-form').serialize(),
                				success:function(data){
                					/*
						            <tr>
										<td>用户编号</td>
										<td>用户名称</td>
										<td>用户密码</td>
										<td>用户性别</td>
										<td>用户年龄</td>
									</tr>
                					*/
                					if (data.trim() == 'ok') {
                						
                						alert("更新成功");
                						
                						//更新记录行
            							var json=$('#update-form').serializeArray();
            							//[{name='id',value='10004'},
            							//{name='name',value='赵薇'}]
                						//alert(JSON.stringify(json));
            							var row="<td>"+json[0].value+"</td>";
            							    row+="<td>"+json[1].value+"</td>";
            							    row+="<td>"+json[2].value+"</td>";
            							    row+="<td>"+json[3].value+"</td>";
            							    row+="<td>"+json[4].value+"</td>";
            							//获取选中的行
            							$('tr[focus="focus"]').html(row);
            							
            						}else{
            							alert("更新失败");
            						}
                					
                				}
                			});
                			
                		});
                		
                		//弹出对话框
                		$('#updateModal').modal({
                			show:true
                		});
                	}
                });
			}
		});

		//添加删除事件
		$('#op-del').click(function() {

			//通过属性：focus来选反获取焦点的那一行
			//var html=$('tr[focus="focus"]').html();
			//alert(html);

			var id = $('tr[focus="focus"] :first-child').html();
			if (id == undefined) {
				alert("请求选择要删除的记录");
				return;
			}
			//确定是否要删除
			var f = window.confirm("是否要删除编号：" + id + "的记录");
			if (f) {

				$.ajax({
					type : 'post',
					url : 'index.servlet?id=' + id,
					data : {
						op : "del"
					},
					dataType : 'html',
					success : function(data) {
						//alert(data);
						if (data.trim() != 'fail') {
							//更新分页内容
							$('table tbody').remove();
							$('table tfoot').remove();
							$('table').append(data);

						}
					}

				});

			}

		});
	</script>
</body>

</html>